<template>
  <view class="work-container">
    <!--    &lt;!&ndash; 轮播图 &ndash;&gt;-->
    <!--    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">-->
    <!--      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">-->
    <!--        <swiper-item v-for="(item, index) in data" :key="index">-->
    <!--          <view class="swiper-item" @click="clickBannerItem(item)">-->
    <!--            <image :src="item.image" mode="aspectFill" :draggable="false" />-->
    <!--          </view>-->
    <!--        </swiper-item>-->
    <!--      </swiper>-->
    <!--    </uni-swiper-dot>-->

    <!-- 宫格组件 -->
    <uni-section title="根据您的症状,向你推荐以下药品:" type="line"></uni-section>
    <view class="grid-body">
<!--      <uni-grid :column="4" :showBorder="false" @change="changeGrid">-->
<!--        <uni-grid-item v-for="(item,index) in drugsList" :index="item.drugId">-->
<!--          <view class="grid-item-box">-->
<!--            <image :src="baseUrl+item.drugLogo" class="image" mode="aspectFill" />-->
<!--            <text class="text">{{ item.drugName }}</text>-->
<!--          </view>-->
<!--        </uni-grid-item>-->
<!--      </uni-grid>-->

      <zlxls-goods-edit-list :status="loadStatus" :list="list" @btnClick="btnClick"></zlxls-goods-edit-list>

    </view>
    <!-- 普通弹窗 -->
    <uni-popup class="uni-popup" ref="popup" background-color="#fff" @change="popupChange">
      <uni-section title="药师选择" type="line">
        <uni-grid class="uni-grid" :column="4" :highlight="true" @change="gridChange">
          <uni-grid-item class="uni-grid-item" v-for="(item, index) in pharmacistList" :index="index" :key="index">
            <view class="grid-item-box" style="background-color: #fff;">
              <uni-icons type="weixin" :size="30" color="#777" />
              <br>
              <text class="text">{{ item.nickName }}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-section>
    </uni-popup>
  </view>
</template>

<script>
import { getRecommendedDrugs,getConsultationList } from "@/api/drug/drugs"
import zlxlsGoodsEditList from "@/components/zlxls-goods-edit-list/zlxls-goods-edit-list.vue";
import config from "@/config"
import { getUserList } from "@/api/system/user"
import { toast, showConfirm, tansParams } from '@/utils/common'


const baseUrl = config.baseUrl

export default {
  components: {zlxlsGoodsEditList},
  data() {
    return {
      loadStatus:false,
      // 选中德药品
      selectedDrug:null,
      list:[
        // {
        //   "id": 14,
        //   "name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
        //   "marks": [
        //     "标签",
        //     "标签"
        //   ],
        //   "cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
        //   "total": "15880.00",
        //   "number": 10,
        //   "cate_name": "女装",
        //   "is_hot": 1,
        //   "status": 1,
        //   "create_at": "2023-0714 12:00:00"
        // },
        // {
        //   "id": 14,
        //   "name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
        //   "marks": [
        //     "标签",
        //     "标签"
        //   ],
        //   "cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
        //   "total": "15880.00",
        //   "number": 10,
        //   "cate_name": "女装",
        //   "is_hot": 1,
        //   "status": 1,
        //   "create_at": "2023-0714 12:00:00"
        // }
      ],
      baseUrl,
      drugsList:[],
      pharmacistList:[],
      current: 0,
      swiperDotIndex: 0,
      data: [{
        image: '/static/images/banner/banner01.jpg'
      },
        {
          image: '/static/images/banner/banner02.jpg'
        },
        {
          image: '/static/images/banner/banner03.jpg'
        }
      ]
    }
  },
  onLoad() {
    // 页面启动的生命周期，这里编写页面加载时的逻辑
    // 获取推荐药品
    this.getList()
  },
  methods: {
    btnClick(item,is_hot,index,val,msg){
      this.selectedDrug = item;
      console.log('item',item);
      console.log('is_hot',is_hot);
      console.log('index',index);
      console.log('val',val);
      console.log('msg',msg);
      // 加载药师 roleId=100 病人 101
      getUserList({roleId:100,pageSize:10000}).then(response=>{
        this.pharmacistList = response.rows;
      })
      this.$refs.popup.open('bottom')
    },
    gridChange(e) {
      let {index} = e.detail
      this.pharmacistList[index].badge && this.pharmacistList[index].badge++
      uni.showToast({
        title: `点击第${index+1}个药师`,
        icon: 'none'
      })
      let params = {
        // 选中得 药品id
        selectedDrugId:this.selectedDrug.item.drugId,
        // 选中的 药师
        selectedPharmacistId:this.pharmacistList[index].userId,
        selectedPharmacistName:this.pharmacistList[index].userName,
        // 问药人用户名
        askUserName:this.$store.state.user.name,
        askUserId:this.$store.state.user.userId,
      }
      console.log('@@@@@@@@!!!!',this.$store.state.user);
      console.log('@@@@@@@@!!!!',this.$store.state);
      let url = '/pages/qa/index'+'?'+tansParams(params);
      //console.log('#########', params,url);
      uni.navigateTo({url: url})
    },
    popupChange(e) {
      console.log('当前模式：' + e.type + ',状态：' + e.show);
    },
    drugsListFormatter(list){
      let newList = [];
      // 格式
      let item = {
        "id": 14,
        "name": "真维斯针织衫女夏季洋气设计感时尚潮流冰丝V领上衣女粉色均码",
        "marks": [
          "标签",
          "标签"
        ],
        "cover": "https://img1.360buyimg.com/n6/jfs/t1/109738/7/40737/75073/649ea86bFa8def1b4/b0517e212c2d576c.jpg",
        "total": "15880.00",
        "number": 10,
        "cate_name": "女装",
        "is_hot": 1,
        "status": 1,
        "create_at": "2023-0714 12:00:00"
      }
      for (const el of list) {
        let parseItem = { ...JSON.parse(JSON.stringify(item)),...el};
        parseItem.id =el.drugId;
        parseItem.name =el.drugName;
        parseItem.cover = baseUrl+el.drugLogo;
        parseItem.cate_name = el.indicationsLabels ?el.indicationsLabels.split(','):[];
        newList.push(parseItem);
      }
      this.list = newList;
    },
    getList(){
      /*
      getUserProfile().then(response => {
          this.user = response.data
        })
       */
      getRecommendedDrugs({pageSize:100000}).then(response=>{
        this.drugsList = response.rows
        this.drugsListFormatter(response.rows);
      });
    },
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },
    changeGrid(e) {
      console.log('!!!!!!!!@@@@@', e)
      this.$modal.showToast('模块建设中~')
    }
  }
}
</script>

<style lang="scss">

.uni-grid{
  display: flex;
  justify-content: space-around;
  height: 50px;
}

.uni-grid-item{
  width: 50px;
}

.grid-item-box {
  display: block;
  width: 72px;
}
</style>
